<template>
  <div>
    <div class="summary-form">
      <el-card>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>报告管理</el-breadcrumb-item>
        </el-breadcrumb>
        <br />
        <!-- 表单查询 -->
        <el-form
          :inline="true"
          class="queryFormClass"
          label-width="80px"
          size="small"
        >
          <el-form-item label="报告名称">
            <el-input
              v-model="queryForm.reportName"
              placeholder="请输入报告名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="报告类型">
            <el-select
              clearable
              v-model="queryForm.type"
              placeholder="报告类型"
              style="width:120px"
            >
              <el-option
                v-for="item in reportType"
                :key="item.lable"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报告结果">
            <el-select
              clearable
              v-model="queryForm.result"
              placeholder="报告结果"
              style="width:120px"
            >
              <el-option
                v-for="item in resultType"
                :key="item.lable"
                :value="item.value"
                :label="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 表格数据 -->
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          highlight-current-row
          v-loading="loading"
          size="medium"
        >
          <el-table-column label="ID" type="index" width="50">
          </el-table-column>
          <el-table-column label="报告类型" width="120">
            <template slot-scope="scope">
              <el-tag
                :type="
                  scope.row.type == 1
                    ? 'primary'
                    : scope.row.type == 2
                    ? 'success'
                    : 'warning'
                "
                effect="plain"
                >{{ reportType[scope.row.type].label }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="报告名称" prop="name"> </el-table-column>
          <el-table-column label="报告结果" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.result === true ? 'success' : 'danger'">
                {{ scope.row.result === true ? "成功" : "失败" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="运行时间"
            width="240px"
            prop="create_time"
            :formatter="dateFormat"
          >
          </el-table-column>
          <el-table-column label="耗时" width="120" prop="spend_time">
          </el-table-column>
          <el-table-column label="用例数量" width="120" prop="tests_count">
          </el-table-column>

          <!-- 按钮 -->
          <el-table-column label="操作" width="320" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleWatchReports(scope.row.id)"
                type="primary"
                >查看详情
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <br />

        <!-- 分页 -->
        <el-pagination
          background
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          :page-sizes="[12, 20, 50, 100]"
          :total="pagination.total"
          :current-page.sync="pagination.page"
          @current-change="loadSummary(pagination.page)"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { querySummary, deleteSummary } from "@/api/summary";
import moment from "moment";

export default {
  name: "",
  props: {},
  components: {},
  data() {
    return {
      reportType: [
        { label: "全部", value: "undefined", type: "" },
        { label: "调试", value: 1, type: "warning" },
        { label: "定时", value: 2, type: "danger" },
        { label: "异步", value: 3, type: "success" }
      ],
      resultType: [
        { label: "全部", value: "undefined" },
        { label: "失败", value: 0 },
        { label: "成功", value: 1 }
      ],
      
      // 查询表单
      queryForm: {
        reportName: undefined,
        type: undefined,
        result: undefined
      },

      // 【分页属性】
      pagination: {
        total: 0,
        page: 1,
        pageSize: 12
      },

      loading: true,
      tableData: []
    };
  },
  computed: {},
  watch: {},
  created() {
    this.loadSummary();
  },
  mounted() {},
  methods: {
    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.loadSummary();
    },

    loadSummary(page = 1) {
      querySummary({
        page,
        page_size: this.pagination.pageSize,
        project_id: parseInt(window.localStorage.getItem("projectId"))
      }).then(res => {
        this.tableData = res.data.result;
        this.pagination.total = res.data.total;
        this.loading = false;
      });
    },

    //重置
    resetSearch() {
      this.queryForm = {};
      this.loadSummary();
    },

    //查询
    onSubmit() {
      if (this.queryForm.type === "undefined") {
        this.queryForm.type = undefined;
      }
      if (this.queryForm.result === "undefined") {
        this.queryForm.result = undefined;
      }
      if (this.queryForm.reportName === "undefined") {
        this.queryForm.reportName = undefined;
      }
      querySummary({
        page: 1,
        pageSize: this.pagination.pageSize,
        name: this.queryForm.reportName,
        type: this.queryForm.type,
        result: this.queryForm.result,
        project_id: parseInt(window.localStorage.getItem("projectId"))
      }).then(res => {
        this.tableData = res.data.result;
        this.pagination.total = res.data.total;
      });
    },

    handleWatchReports(index) {
      window.open(this.$api.baseURL + "api/manage/summary/detail/" + index);
    },

    // 编写日期格式化方法
    dateFormat: function(row, column) {
      const date = row[column.property];
      if (date === undefined) {
        return "";
      }
      // 这里的格式根据需求修改
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },

    handleDelete(id) {
      {
        this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            deleteSummary({ id }).then(res => {
              if (res.data.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.loadSummary();
              } else {
                this.$message.error(res.data.msg);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    }
  }
};
</script>

<style lang="less"></style>
